<template>
  <div class="dashboard">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="header-content">
        <h1 class="logo">管理系统</h1>
        <div class="user-info">
          <span class="welcome">欢迎，{{ username }}</span>
          <el-button type="text" @click="logout" class="logout-btn">退出登录</el-button>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 侧边栏 -->
      <div class="sidebar">
        <el-menu
          :default-active="currentMenuKey"
          class="sidebar-menu"
          background-color="rgba(18, 18, 38, 0.8)"
          text-color="#fff"
          active-text-color="#4FC3F7"
          @select="handleMenuSelect"
        >
          <el-menu-item index="home">
            <i class="el-icon-s-home"></i>
            <span>仪表板</span>
          </el-menu-item>
          <el-menu-item index="test">
            <i class="el-icon-cpu"></i>
            <span>组件测试</span>
          </el-menu-item>
          <el-menu-item index="oss">
            <i class="el-icon-folder-opened"></i>
            <span>OSS管理</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 内容区域 -->
      <div class="content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      username: localStorage.getItem('username') || '用户'
    };
  },
  computed: {
    currentMenuKey() {
      // 根据当前路由确定菜单选中状态
      const routeName = this.$route.name;
      console.log('当前路由名称:', routeName);
      if (routeName === 'DashboardHome') return 'home';
      if (routeName === 'ComponentTest') return 'test';
      if (routeName === 'OssManagement') return 'oss';
      return 'home';
    }
  },
  methods: {
    logout() {
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.removeItem('isLoggedIn');
        localStorage.removeItem('username');
        this.$message.success('已退出登录');
        this.$router.push('/login');
      }).catch(() => {
        // 用户取消
      });
    },
    handleMenuSelect(index) {
      console.log('菜单选择:', index);
      
      // 构建目标路由路径
      let targetPath = '';
      if (index === 'home') {
        targetPath = '/dashboard/home';
      } else if (index === 'test') {
        targetPath = '/dashboard/test';
      } else if (index === 'oss') {
        targetPath = '/dashboard/oss';
      }
      
      // 检查是否已经在目标路由，避免重复导航
      if (this.$route.path !== targetPath) {
        this.$router.push(targetPath).catch(err => {
          // 捕获并忽略重复导航错误
          if (err.name !== 'NavigationDuplicated') {
            console.error('路由导航错误:', err);
          }
        });
      } else {
        console.log('已在当前路由，跳过导航');
      }
    }
  },
  mounted() {
    console.log('Dashboard组件已挂载');
    console.log('当前路由:', this.$route.path);
    console.log('当前路由名称:', this.$route.name);
    
    // 如果当前在dashboard根路径，自动跳转到home
    if (this.$route.path === '/dashboard') {
      this.$router.push('/dashboard/home');
    }
  },
  watch: {
    '$route'(to, from) {
      console.log('Dashboard路由变化:', { from: from.path, to: to.path });
      console.log('新路由名称:', to.name);
    }
  }
};
</script>

<style scoped>
.dashboard {
  min-height: 100vh;
  background: transparent;
}

.header {
  background: rgba(18, 18, 38, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 60px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 100%;
}

.logo {
  color: #4FC3F7;
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.welcome {
  color: #fff;
  font-size: 14px;
}

.logout-btn {
  color: #4FC3F7 !important;
  padding: 0 !important;
}

.logout-btn:hover {
  color: #2196F3 !important;
}

.main-content {
  display: flex;
  margin-top: 60px;
  min-height: calc(100vh - 60px);
}

.sidebar {
  width: 200px;
  background: rgba(18, 18, 38, 0.8);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.sidebar-menu {
  border: none;
  height: 100%;
}

.sidebar-menu >>> .el-menu-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-menu >>> .el-menu-item:hover {
  background-color: rgba(79, 195, 247, 0.1);
}

.sidebar-menu >>> .el-menu-item.is-active {
  background-color: rgba(79, 195, 247, 0.2);
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
  }
}
</style>